<template>
  <div class="box">
    <!-- 流程步骤 -->
    <div class="conditionsTxt stepbox">
        <h3>
            <p>步骤</p>
            <p>事项</p>
            <p>担当人</p>
            <p>计划时间</p>
            <p>完成时间</p>
        </h3>
        <el-collapse v-model="activeStep">
          <el-collapse-item :title="st.group" :name="index" v-for="(st,index) in step" :key="index">
              <ul>
                <li 
                  v-for="(cont,index) in st.children" 
                  :key="index" 
                  :class="[cont.status=='2'?'isUnder':'',cont.status=='0'?'isSuccee':'',cont.id==clickLiData.id?'isActive':'']" 
                  @click="clickLi(cont)">
                    <i class="el-icon-success" v-if="cont.status=='0'"></i>
                    <i class="el-icon-warning" v-else-if="cont.status=='2'">
                      <span>{{cont.no}}</span>
                    </i>
                    <i v-else>{{cont.no > 9 ? cont.no : "0" + cont.no}}</i>
                    <p>{{cont.name}}</p>
                    <p>
                      <el-tooltip class="item" effect="dark" :content="cont.liable" placement="top" v-if="cont.liable">
                        <span>{{cont.liable}}</span>
                      </el-tooltip>
                      <span v-else>--</span>
                    </p>
                    <p>{{getPredictDay(cont)}}</p>
                    <p>
                      <span v-if="cont.finishTime">{{getFinishTime(cont)}}</span>
                      <span v-else>{{getStepState(cont)}}</span>
                    </p>
                </li>
              </ul>
          </el-collapse-item>
        </el-collapse>
    </div>
    <!-- 流程步骤编辑步骤 抽屉 -->
    <el-drawer
        title="编辑步骤"
        size="40%"
        @close='stepClose'
        :visible.sync="stepDrawer">
        <div class="conditionsTxt pd20 drawerBox stepDrawer">
        <h3>
            <p>删除</p>
            <p>编号</p>
            <p>事项</p>
            <p>作业天数</p>
        </h3>
        <div class="mb60">
          <el-tree
            :allow-drop="canDrag"
            @node-drop="handleDrop"
            :data="step"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            draggable>
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <!-- {{data}} -->
              <i
                class="el-icon-remove"
                v-if="data.isPid"
                @click="removeBzgroup(data)"
                :class="getIsEdit(data)?'isEdit':''"
              ></i>
              <i class="el-icon-remove" v-else @click="removeBzList(data)" :class="data.isEdit?'':'isEdit'"></i>
              <p class="treeNum" v-if="!data.isPid">
                {{ data.no > 9 ? data.no : "0" + data.no }}
              </p>
              <el-input v-model="data.group" v-if="data.isPid" @input="editGroupInput(data)" :disabled="getIsEdit(data)" class="groupInput"></el-input>
              <el-input v-model="data.name" v-if="!data.isPid" @input="editInput(data)" :disabled="!data.isEdit"></el-input>
              <el-input v-model.number="data.workday" v-if="!data.isPid" @input="editInput(data)" :disabled="!data.isEdit"></el-input>
              
              <!-- 添加图标 -->
              <p class="drawerAdd" v-if="data.isPid">
                <svg-icon icon-class="add-icon" @click="addBzList(data)" />
              </p>
            </span>
          </el-tree>
        </div>
        <SubBtn>
            <template slot="btn">
              <el-button round @click="addBzGroup">添加流程组</el-button>
              <el-button type="primary" round @click="saveBtn">保存</el-button>
            </template>
        </SubBtn>
        </div>
    </el-drawer>
    <!-- 流程步骤编辑步骤 end -->
    <SubBtn>
        <template slot="btn">
            <p class="record" @click="clickRecord">更改记录 <i class="el-icon-document"></i></p>
            <div v-if="isEdit">
              <el-button round @click="stepClick">编辑流程</el-button>
              <!-- <el-button round @click="copyBtn">复制流程</el-button>
              <el-button round @click="stickBtn">粘贴流程</el-button> -->
              <el-button type="primary" round @click="nextStep" :disabled="!isCheck">进入下一步</el-button>
            </div>
        </template>
    </SubBtn>

    <!-- 点击一条流程步骤的抽屉 -->
    <el-drawer
      :title="`第${getChNum}步 - ${editStuffName}`"
      size="85%"
      :visible.sync="stepProcess">
      <div class="stepProcess">
          <StepProcess></StepProcess>
      </div>
    </el-drawer>
    <!-- 点击一条流程步骤的抽屉 end -->
  </div>
</template>

<script>
import SubBtn from "@/wss/components/subBtn.vue";
import StepProcess from "./stepProcess.vue"
import {switchTree,TurnChinese,getNowFormatDate} from "@/wss/utils/wss.js";
import {
  getProjectFlowListApi,
  addProjectFlowApi,
  editProjectFlowApi,
  removeProjectFlowApi
} from "@/wss/newApi_3-24/work/projectFlow.js"
import { editProjectApi,getProjectIsFinishedApi,editFinancialOrderApi,getOrderListApi } from "@/wss/newApi_3-24/doc/project.js"
import debounce from "lodash/debounce";
export default {
  components:{SubBtn,StepProcess},
  props:{
    projectData: {
      type: Object,
      default: () => {
          return {};
      },
    },
  },
  data(){
    return{
      //当前激活的项目步骤
      activeStep: [],
      // 编辑项目步骤抽屉
      stepDrawer:false,
      saveClose: false,//判断当前的抽屉是点保存关闭还是普通关闭
      isSend: false,//点击保存时判断当前的输入的是正确的数据

      // 项目步骤数据
      step:[],

      temArray:[],//暂存的数组 
      //当前删除的id组
      removeId:[],
      //当前添加的条件
      addTj:[],
      //修改项目条件
      editTj:[],

      clickLiData:{},//当前选中的流程
      copyData:{},//复制的流程

      //点击流程 流程抽屉的状态 *******************
      stepProcess:false,
      editStuffName:'',//当前选中的材料收集名称
      editStuffNo:'',//当前选中材料的序号no

      isCheck: true,// 判断当前点击保存是否已经返回请求

      isEdit: true,//判断当时是否可以编辑
    }
  },
  mounted(){
    // 获取项目条件：根据no字段排序
    let arr = this.projectData.flows.sort((a, b) => Number(a.no)- Number(b.no))
    // 转换树形结构
    this.step = switchTree(arr);

    // 默认展开所有折叠面板 activeStep
    this.step.forEach((item,i)=>{
      this.activeStep.push(i)
    })

    // 已完成或者进行中的步骤组加一个isOk字段
    this.step.forEach(item=>{
      item.isOk = false
      item.children.forEach(k=>{
        if(k.status=='0' || k.status=='2'){
          item.isOk = true
        }else{
          item.isOk = false
        }
      })
    })
    // 已完成或者进行中的步骤组加一个isOk字段 end
  },
  watch:{
    //监听项目的数据是否有更新，更新的话就重新获取项目信息
    projectData(newValue,oldValue){
      // 获取项目条件：根据no字段排序
      let arr = this.projectData.flows.sort((a, b) => Number(a.no)- Number(b.no))
      // 转换树形结构
      this.step = switchTree(arr);

      // 默认展开所有折叠面板 activeStep
      this.step.forEach((item,i)=>{
        this.activeStep.push(i)
      })

      // 已完成或者进行中的步骤组加一个isOk字段
      this.step.forEach(item=>{
        item.isOk = false
        item.children.forEach(k=>{
          if(k.status=='0' || k.status=='2'){
            item.isOk = true
          }else{
            item.isOk = false
          }
        })
      })
      // 已完成或者进行中的步骤组加一个isOk字段 end

      // 监听如果所有步骤都完成了就不显示编辑流程按钮和进入下一步的按钮
      this.step.forEach(item=>{
        item.children.forEach(k=>{
          if(k.status=='0'){
            this.isEdit = false
          }else{
            this.isEdit = true
          }
        })
      })
      // 监听如果所有步骤都完成了就不显示编辑流程按钮和进入下一步的按钮 end
    },
  },
  methods:{

    //获取项目步骤列表
    async getProjectFlowList(){
      let result = await getProjectFlowListApi()
      if(result.code==200){
        //根据no字段排序
        let arr = result.rows.sort((a, b) => Number(a.no)- Number(b.no))
        this.step = switchTree(arr)

        // 默认展开所有折叠面板 activeStep
        this.step.forEach((item,i)=>{
          this.activeStep.push(i)
        })
      }
    },

    // 拖拽时判定目标节点能否被放置
    canDrag(draggingNode, dropNode, type) {
      // 添加一条数据之前要判断如果当前位置的后面是成功或者进行中的时候不能添加
      // 目标节点的状态是 0已完成和2进行中 不能拖过去
      if(dropNode.data.status == '0' || dropNode.data.status == '2'){
        return false
      }
      //如果拖过去的是组，组里面的步骤都是已完成或者进行中 不能拖过去
      if(dropNode.data.isOk){
        return false
      }

      // 添加一条数据之前要判断如果当前位置的后面是成功或者进行中的时候不能添加 end
      
      if (draggingNode.level == '1' || !draggingNode.data.isEdit) {
        return false
      } else {
        if(draggingNode.level==dropNode.level){
          //组中只剩一个的时候不能拖拽
          if(draggingNode.parent.data.children.length==1){
            return false
          }else{
            return type==="prev" || type==="next"
          }
          //组中只剩一个的时候不能拖拽 end
        }else if(draggingNode.level==dropNode.level+1){
          return type==='inner'
        }else{
          return false
        }
      }

    },

    //拖拽成功完成时的事件 draggingNode拖拽节点 dropNode进入的节点 dropType放置位置 ev是event
    handleDrop(draggingNode, dropNode, dropType, ev) {
      //修改拖拽后的group为目标节点的group
      draggingNode.data.group = dropNode.data.group

      // 拖拽之后的数字no要改变 ************************
      let newStep = []
      //把所有子项转成一整个数组
      this.step.forEach(item=>{
        newStep = [...newStep,...item.children]
      })
      //把下标+1重新赋值给所有子项no
      for(let i=0;i<newStep.length;i++){
        newStep[i].no = (i+1)
      }
      // 把全部子项给到修改组里面
      newStep.forEach(item=>{
        // 有id才加进去
        if(item.id){
          this.editTj.push(item)
        }
      })
      // 拖拽之后的数字no要改变 ************************end

    },

    //修改组的组名的时候，下面的子元素都要把组名改了
    editGroupInput(data){
      data.children.forEach((item)=>{
        item.group = data.group
      })
      // 去掉重复的
      data.children.map(item=>{ 
        this.editTj = this.editTj.filter(item2 => {
          item2.id != item.id
        });
      })
      //把当前修改的添加到修改数据里面
      this.editTj = [...this.editTj,...data.children]
    },

    //修改input框的时候
    editInput(data){
      //判断修改的数据是否有重复的，删除重复的
      this.editTj.forEach(item=>{
        // 获得下标
        let index = this.editTj.indexOf(item);
        if(item.id == data.id){
          // 根据下标去删数据
          this.editTj.splice(index,1)
        }
      })
      //刚刚添加进去条件的不能当做修改的加入到修改组里面 通过id判断是否是刚刚加进去的
      if(data.id){
        //把当前修改的添加到修改数据里面
        this.editTj.push(data)
      }
    },

    // 计算组名能否被修改 children子元素有一个元素没有isEdit字段，就要改不能编辑
    getIsEdit(data){
      for (let i=0; i<data.children.length; i++) {
        if(!data.children[i].isEdit) return true
      }
    },

    // 获取当前步骤是进行中 还是 待支付 还是 --
    getStepState(cont){
      // cont.isPaid != false && cont.status == '2'?'进行中':'--'
      if(cont.isPaid != false && cont.status == '2'){
        return '进行中'
      }else{
        if(cont.isPaid == false && cont.status == '2'){
          return '待支付'
        }else{
          return '--'
        }
      }
    },

    // *****************流程步骤*****************
    //点击流程步骤的操作
    stepClick(){
      this.saveClose = false //改成普通关闭状态
      this.isSend = false //点击保存时判断当前的输入的是正确的数据
      this.stepDrawer=true//显示流程步骤的抽屉
      // 把数组先保存起来,关闭抽屉和取消的时候还原旧数据
      this.temArray =  JSON.parse(JSON.stringify(this.step))
    },

    // 关闭流程步骤的回调
    stepClose(){
      // 还原旧数据 普通关闭执行还原数据
      if(this.saveClose == false){
        this.step = this.temArray;
      }
      //清空删除、添加、修改的数据
      this.removeId=[]//当前删除的数据
      this.addTj=[]//当前添加的数据
      this.editTj=[]//修改项目的数据
    },

    //删除步骤的其中一组
    removeBzgroup(group){
      let step = this.step;
      if(group.id){
        // 当删除的这一条是有id的说明是已经添加的
        step = step.filter((item) => {
          return item.group != group.group;
        });
        this.step = step;
      }else{
        // 当删除的这一条是没有id的说明是新添加的
        step.forEach((i) => {
          let index = step.indexOf(group)
          if(i == group){
            step.splice(index,1)
          }
        })
      }

      //获得当前删除组下的所有的id
      group.children.forEach(i=>{
        this.removeId.push(i.id)
      })

      //删除刚刚添加的一条的时候，把添加数据里面的那一条删掉
      this.addTj.forEach(item=>{
        // 获得下标
        let index = this.addTj.indexOf(item);
        if(item == group){
          this.addTj.splice(index,1)
        }
      })

      // 添加之后的数字no要改变 ************************
      let newStep = []
      //把所有子项转成一整个数组
      this.step.forEach(item=>{
        newStep = [...newStep,...item.children]
      })
      //把下标+1重新赋值给所有子项no
      for(let i=0;i<newStep.length;i++){
        newStep[i].no = (i+1)
      }
      // 把全部子项给到修改组里面
      newStep.forEach(item=>{
        // 有id才加进去
        if(item.id){
          this.editTj.push(item)
        }
      })
      // 添加之后的数字no要改变 ************************end
    },
      
    // 删除步骤的其中一条
    removeBzList(list){
      let step = this.step;
      if(list.id){
        // 当删除的这一条是有id的说明是已经添加的
        step.forEach((i) => {
          i.children = i.children.filter((k) => {
            return k.id != list.id;
          });
        });
        this.step = step;
      }else{
        // 当删除的这一条是没有id的说明是新添加的
        step.forEach((i) => {
          i.children.forEach((k)=>{
            // 获得下标
            let index = i.children.indexOf(list)
            if(k == list){
              i.children.splice(index,1)
            }
          })
        })
      }

      //获得当前删除的id
      this.removeId.push(list.id)
      //删除刚刚添加的一条的时候，把添加数据里面的那一条删掉
      this.addTj.forEach(item=>{
        // 获得下标
        let index = this.addTj.indexOf(item);
        if(item == list){
          this.addTj.splice(index,1)
        }
      })

      // 添加之后的数字no要改变 ************************
      let newStep = []
      //把所有子项转成一整个数组
      this.step.forEach(item=>{
        newStep = [...newStep,...item.children]
      })
      //把下标+1重新赋值给所有子项no
      for(let i=0;i<newStep.length;i++){
        newStep[i].no = (i+1)
      }
      // 把全部子项给到修改组里面
      newStep.forEach(item=>{
        // 有id才加进去
        if(item.id){
          this.editTj.push(item)
        }
      })
      // 添加之后的数字no要改变 ************************end
    },

    //添加一条数据
    addBzList(data){
      // 添加一条数据之前要判断如果当前位置的后面是成功或者进行中的时候不能添加
      // 获得下标
      let index = this.step.indexOf(data);
      if(this.step[index+1]){
        if(this.step[index+1].children[0].status=='0' || this.step[index+1].children[0].status=='2'){
          this.$message({type:"warning",message:"当前位置无法添加流程！"})
          return
        }
      }
      // 添加一条数据之前要判断如果当前位置的后面是成功或者进行中的时候不能添加 end

      //把数据里的no提取出来
      let noList = [];
      this.step.forEach((item) => {
        if (item.no) {
          noList.push(parseInt(item.no));
        }
        if (item.children.length > 0) {
          item.children.forEach((c) => {
            if (c.no) {
              noList.push(parseInt(c.no));
            }
          });
        }
      });
      //获得最大的no 然后+1
      let maxNum = (parseInt(Math.max(...noList)) || 0) + 1;

      //添加一条数据
      data.children.push({
        group: data.group,
        name:"",
        scale: "",
        workday:"",
        no: maxNum.toString(),
        status: '1',
        // typeId: this.typeId,  
        isEdit: true,
      });

      //获得当前添加的这一个条件
      this.addTj.push(data.children[data.children.length-1])

      // 添加之后的数字no要改变 ************************
      let newStep = []
      //把所有子项转成一整个数组
      this.step.forEach(item=>{
        newStep = [...newStep,...item.children]
      })
      //把下标+1重新赋值给所有子项no
      for(let i=0;i<newStep.length;i++){
        newStep[i].no = (i+1)
      }
      // 把全部子项给到修改组里面
      newStep.forEach(item=>{
        // 有id才加进去
        if(item.id){
          this.editTj.push(item)
        }
      })
      // 添加之后的数字no要改变 ************************end
    },

    //添加一组数据
    addBzGroup(){
      this.step.push({
        children:[],
        group: "",
        isPid: true,
        typeId: this.typeId, 
      });

      //获得当前添加的这一个组
      // this.addTj.push(this.step[this.step.length-1])
    },

    // 单击某一行的回调
    clickLi(cont){
      this.clickLiData = cont //获取当前点击的流程
    },

    //点击复制流程按钮
    copyBtn(){
      if(this.clickLiData.id){
        //深拷贝
        this.copyData = JSON.parse(JSON.stringify(this.clickLiData))
        //删除一些不需要的字段
        delete this.copyData.createBy
        delete this.copyData.createTime
        delete this.copyData.id
        delete this.copyData.updateBy
        delete this.copyData.updateTime
        this.copyData.scale = ""
        this.copyData.isEdit = true

        this.$message({type:"success",message:"复制成功！"})
      }else{
        this.$message({type:"warning",message:"请选择一条流程！"})
      }
    },

    //点击粘贴流程按钮  防抖
    stickBtn: debounce(function(){
      if(this.copyData.name){
        //先过滤出当前选中的这个流程所在的流程组的下标 this.clickLiData
        let group = this.step.filter(item=>{
          return item.group == this.clickLiData.group
        })
        // console.log(group[0].children);
        // 获得当前选中这个流程的下标
        let index = group[0].children.indexOf(this.clickLiData);
        group[0].children.splice(index+1,0,this.copyData)

        let newStep = []
        //把所有子项转成一整个数组
        this.step.forEach(item=>{
          newStep = [...newStep,...item.children]
        })
        //把下标+1重新赋值给所有子项no
        for(let i=0;i<newStep.length;i++){
          newStep[i].no = (i+1)
        }
        // 把全部子项给到修改组里面
        newStep.forEach(item=>{
          // 有id才加进去
          if(item.id){
            this.editTj.push(item)
          }
        })

        this.addTj.push(this.copyData) //把粘贴的这个流程添加到新增组里面

        //根据no字段排序
        let arr = newStep.sort((a, b) => Number(a.no)- Number(b.no))
        this.step = switchTree(arr)

        // 排序完成后：获得粘贴流程的下标
        let i = this.editTj.indexOf(this.copyData);
        //然后把修改组里面存在的这个新增的删除
        this.editTj.splice(i,1)

        this.isSend = true //通过
        let isCopy = true //传一个是复制的操作字段
        this.startRequest(isCopy) //发请求
      }else{
        this.$message({type:"warning",message:"请先复制一条流程！"})
      }
    },200),

    // 点击进行下一步按钮
    nextStep: debounce(async function(){
      this.isCheck = false //先不给点击保存
      // let step = JSON.parse(JSON.stringify(this.step))
      let step = this.step
      let newStep = [] //全部子步骤的集合
      step.forEach(item=>{
          newStep=[...newStep,...item.children]
      })
      // 拿到第一个进行中（status=2）的步骤，然后改为已完成（status=0）
      for (let i = 0; i < newStep.length; i++) {
        let currentStep = newStep[i]
        if(currentStep.status == '2'){

          // newStep[i].isPaid == false 是用户该支付了，没有isPaid字段说明这个步骤还在进行中
          if(currentStep.isPaid == false){
            // 点击下一步 判断用户在这一步是否已支付 或者 无收比的时候
            if(currentStep.isPaid || !currentStep.scale){
              this.insteadOk(currentStep) //改成已成功
              await this.editProject(newStep); //项目修改的接口
              this.$bus.$emit('retrieveItem') // 重新获取项目的信息

              // 修改当前订单状态为进行中 订单状态 -1已关闭 0已完成 1未支付 2已支付 3进行中
              // await this.getOrderList('3') //改为1未支付

              // 判断如果最后一步的状态为已完成，就要把当前项目的状态改为已完成
              if(newStep[newStep.length-1].status=='0'){
                console.log('把项目状态改成已完成------------------------------');
                await this.editProjectStatus('0')//修改当前项目的状态为已完成
                this.$bus.$emit('retrieveItem') // 重新获取项目的信息
                this.$bus.$emit('againProjectList') // 重新获取左边项目列表的信息
              }

              this.isCheck = true //可以点击保存了
            }else{
              this.$message({type:"warning",message:"当前步骤用户未支付，无法进行下一步！"})
              this.isCheck = true //先不给点击保存
            }
          }else{
            if(!currentStep.scale){
              // 无收比的时候
              await this.insteadOk(currentStep) //改成已成功
              await this.editProject(newStep); //项目修改的接口
              this.$bus.$emit('retrieveItem') // 重新获取项目的信息
              this.isCheck = true //可以点击保存了
            }else{
              // 这个是有收比的
              // 没有isPaid字段说明这个步骤还在进行中，现在该改成isPaid = false，用户改去支付了
              currentStep.isPaid = false
              currentStep.liable = this.$store.state.user.userInfo.nickName //责任人
              currentStep.liableId = this.$store.state.user.userInfo.userId //责任人id
              await this.editProject(newStep); //项目修改的接口
              this.$bus.$emit('retrieveItem') // 重新获取项目的信息
              this.isCheck = true //可以点击保存了
            }
          }
          return
        }else if(currentStep.status == '1'){
          // 拿到第一个未开始（status=1）的步骤，然后改为进行中（status=2）
          currentStep.status = '2'
          currentStep.startTime = getNowFormatDate() //开始时间
          currentStep.liable = this.$store.state.user.userInfo.nickName //责任人
          currentStep.liableId = this.$store.state.user.userInfo.userId //责任人id
          console.log(currentStep.name,'改为进行中',currentStep.status);
          
          await this.editProject(newStep); //项目修改的接口
          await this.editProjectStatus('2')//修改当前项目的状态为进行中
          this.isCheck = true //可以点击保存了
          
          // 修改当前订单状态为待支付 订单状态 -1已关闭 0已完成 1未支付 2已支付 3进行中
          if(currentStep.scale){
            await this.getOrderList('1') //改为1未支付
            this.isCheck = true //可以点击保存了
          }
          this.$bus.$emit('retrieveItem') // 重新获取项目的信息
          return
        }
      }

    },200),
    // 点击进行下一步按钮 end

    // 点击下一步 判断用户在这一步是否已支付 或者 无收比的时候
    insteadOk(item){
      item.status = '0'
      item.finishTime = getNowFormatDate() //实际完成时间
      item.liable = this.$store.state.user.userInfo.nickName //责任人
      item.liableId = this.$store.state.user.userInfo.userId //责任人id
      console.log(item.name,'改为已完成',item.status);
    },

    // 获取预计完成时间*********
    getPredictDay(list){
      // let days = 0            
      // let newStep = [] //全部子步骤的集合
      // this.step.forEach(item=>{
      //     newStep=[...newStep,...item.children]
      // })
      // // 拿到要计算的天数，当前步骤前面的所有工作时间的和
      // for (let i = 0; i < newStep.length; i++) {
      //     if(newStep[i].id == list.id){
      //         days += newStep[i].workday
      //         return this.getTime(days)
      //     }else{
      //         days += newStep[i].workday
      //     }
      // }
      if(list.planFinishTime){
        let time = list.planFinishTime.split(" ");
        let arr = time[0].split("-");
        return arr[0].slice(2) + arr[1] + arr[2];
      }
    },

    // 获取完成时间
    getFinishTime(list){
      if(list.finishTime){
        let time = list.finishTime.split(" ");
        let arr = time[0].split("-");
        return arr[0].slice(2) + arr[1] + arr[2];
      }
    },

    getTime(days){
        var dateT = new Date()
        //转换为MM-DD-YYYY格式
        var nDate = new Date(dateT.getFullYear() + '-' + (dateT.getMonth()+1) + '-' + dateT.getDate());
        var millSeconds = Math.abs(nDate) + (days * 24 * 60 * 60 * 1000);
        var rDate = new Date(millSeconds);
        var year = rDate.getFullYear().toString();
        var month = rDate.getMonth() + 1;
        if (month < 10) month = '0'+ month;
        var date = rDate.getDate();
        if (date < 10) date = '0'+ date;
        return (year.slice(2) + month + date);
    },
    // 获取预计完成时间*********end
    
    // *****************流程步骤*****************end

    // 点击保存按钮 ***************
    saveBtn() {
      //判断点击保存时的数据是否是正常的数据
      try {
        //当把数据全部删除的情况
        if (this.step.length == 0) {
          // 条件改成通过
          this.isSend = true;
        }

        this.step.forEach((item) => {
          if (item.children.length < 1) {
            this.$message({
              type: "warning",
              message: "组下面至少要有一个条件！",
            });
            throw new Error("组下面至少要有一个条件！");
          } else {
            if (item.isPid == true && item.group == "") {
              this.$message({ type: "warning", message: "组名不能为空" });
              throw new Error("组名不能为空");
            } else {
              item.children.forEach((c) => {
                if (c.name == "" || c.workday == "") {
                  this.$message({ type: "warning", message: "事项或者工作天数不能为空" });
                  throw new Error("事项或者工作天数不能为空");
                }
              });
              // 条件改成通过
              this.isSend = true;
            }
          }
        });
      } catch (e) {
        throw e.message
      };
      this.startRequest()// 发起 删除、添加、修改
    
    },
    // 点击保存按钮 ***************end

    //如果条件是通过就要去发请求 ********************************
    async startRequest(isCopy){
      this.isCheck = false //先不给点击保存
      // 发起 删除、添加、修改
      if (this.isSend == true) {
        this.$message({ type: "success", message: "正在编辑，请稍等！" });

        let step = JSON.parse(JSON.stringify(this.step))
        // newArr 修改后的数据
        let newArr = []
        step.forEach(item=>{
          newArr = [...newArr,...item.children]
        })

        // 修改记录 ****************************************
        let jlArr = []
        // 添加的
        let addTj = JSON.parse(JSON.stringify(this.addTj))
        addTj.forEach(item=>{
          item.changeType = '1' //1 添加 2 修改 3 删除
          item.type = '3' //1 条件 2 需求 3 流程
          item.newGroup = item.group
          item.newName = item.name
          item.newNo = item.no
          jlArr.push(item)
        })

        // 修改的
        let editTj = JSON.parse(JSON.stringify(this.editTj))
        editTj.forEach(item=>{
          // 有id证明不是新添加的一条步骤
          if(item.id){
            item.changeType = '2' //1 添加 2 修改 3 删除
            item.type = '3' //1 条件 2 需求 3 流程
            item.newGroup = item.group
            item.newName = item.name
            item.newNo = item.no
            // 获取之前的 组名、名称、序号no
            let oldTem = []
            // isCopy 判断是否是复制进来的，如果是复制进来的使用this.step作为数据源
            if(isCopy){
              this.step.forEach(i=>{
                oldTem = [...oldTem,...i.children]
              })
            }else{
              this.temArray.forEach(i=>{
                oldTem = [...oldTem,...i.children]
              })
            }
            let oldItem = oldTem.filter(k=>{
              return k.id == item.id
            })
            item.oldGroup = oldItem[0].group
            item.oldName = oldItem[0].name
            item.oldNo = oldItem[0].no
            // 获取之前的 组名、名称、序号no end
            jlArr.push(item)
          }
        })

        // 删除的
        let removeId = JSON.parse(JSON.stringify(this.removeId))
        removeId.forEach(item=>{
          if(item){
            let reObj = {}
            reObj.changeType = '3' //1 添加 2 修改 3 删除
            reObj.type = '3' //1 条件 2 需求 3 流程
            // 获取之前的 组名、名称、序号no
            let oldTem = []
            this.temArray.forEach(i=>{
              oldTem = [...oldTem,...i.children]
            })
            let oldItem = oldTem.filter(k=>{
              return k.id == item
            })
            reObj.oldGroup = oldItem[0].group
            reObj.oldName = oldItem[0].name
            reObj.oldNo = oldItem[0].no
            
            jlArr.push(reObj)
          }
        })
        // 修改记录 ************************************************** end

        await this.editProject(newArr,jlArr); //项目修改的接口
        this.$bus.$emit('retrieveItem') // 重新获取项目的信息
        this.addTj = []
        this.editTj = []
        this.removeId = []

        this.saveClose = true //改成保存关闭状态
        this.stepDrawer = false// 关闭抽屉
        this.isCheck = true //可以点击保存了
      }
    },
    //如果条件是通过就要去发请求 ********************************end

    // 项目修改的接口
    async editProject(newArr,jlArr){
      let data = {
        id: this.projectData.id,
        flows: newArr,
        changeHistories: jlArr,
      }
      let result = await editProjectApi(data)
      if(result.code == 200){
        this.$message({ type: "success", message: "保存成功！" });
      }
    },

    // 修改当前项目的状态
    async editProjectStatus(status){
      let data = {
        id: this.projectData.id,
        status: status,
      }
      let result = await editProjectApi(data)
      if(result.code == 200){ 
        this.getProjectIsFinished() //判断当前项目是否完成
      }
    },
    
    // 判断当前项目是否完成
    async getProjectIsFinished(){
      let projectId = this.projectData.id
      let result = await getProjectIsFinishedApi({projectId})
      if(result.code == 200) {
        if(result.isFinished){
          this.getOrderList('0') //订单状态改为0已完成
        }
      }
    },

    // 查询订单id
    async getOrderList(state){
      let goodsId = this.projectData.id
      let result = await getOrderListApi({goodsId})
      if(result.code==200){
        this.editFinancialOrder(result.rows[0].id,state) //订单状态改为1未支付
      }
    },

    // 修改当前订单状态为待支付
    async editFinancialOrder(id,status){
      let data ={
        id: id,
        status: status,
      }
      let result = await editFinancialOrderApi(data)
      if(result.code != 200) return
    },

    

    // 点击一条流程步骤的抽屉
    clickStep(cont){
      this.editStuffName = cont.name //当前选中的材料收集名称
      this.editStuffNo = cont.no //当前选中材料的序号no
      this.stepProcess = true //显示流程步骤的抽屉
    },
    
    // 请求接口*****************
    async addProjectFlow(data){
      let result = await addProjectFlowApi(data)
      if(result.code != 200) return
    },
    async editProjectFlow(data){
      let result = await editProjectFlowApi(data)
      if(result.code != 200) return
    },
    async removeProjectFlow(id){
      let result = await removeProjectFlowApi(id)
      if(result.code != 200) return
    },
    // 请求接口*****************end

    // 更改记录的抽屉按钮 ***************************
    clickRecord(){
        this.$bus.$emit('openRecordDrawer')
    },
  },

  computed:{
    // 点击流程步骤的某一个事项 计算当前步骤的中文汉字
    getChNum(){
      return TurnChinese(this.editStuffNo)
    },
  }
}
</script>

<style scoped>
h3,h4,p,ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd20{
  padding: 0 20px;
}
/* 右侧样式 */
::v-deep .top .right{
  flex: none;
}
.el-button-group .el-button{
  background-color: #F0F2F5;
  color: #2E3F5E;
  border: 1px solid #F0F2F5;
  padding: 10px 15px;
}
.el-button-group .el-button.isActive{
  background-color: #fff;
  color: #F87A23;
  font-weight: bold;
}

/* 项目条件 */
.conditionsTxt {
    margin-bottom: 60px;
}
.conditionsTxt h3{
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909AAA;
  /* border-bottom: 1px solid #EBEEF5; */
  padding-bottom: 15px;
  margin-top: 10px;
}
.conditionsTxt h3>p:first-child{
  width: 12%;
}
.conditionsTxt h3>p:nth-child(2){
  width: 76%;
}
.conditionsTxt h3>p:nth-child(3){
  width: 12%;
}

::v-deep .conditionsTxt .el-collapse-item__header,
::v-deep .conditionsTxt .el-collapse-item__header.focusing{
  font-size: 14px;
  font-weight: 600;
  color: #2E3F5E;
  padding: 15px 0;
  border-bottom: 1px solid #EBEEF5;
}
::v-deep .conditionsTxt .el-collapse-item__content{
  padding-bottom: 0;
}
::v-deep .conditionsTxt .el-icon-arrow-right:before{
  content: "\E790";
}
::v-deep .conditionsTxt .el-collapse-item__arrow.is-active{
  transform: rotate(180deg);
}

.conditionsTxt ul>li{
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #EBEEF5;
  color: #2E3F5E;
}
.conditionsTxt ul>li i{
  display: block;
  width: 12%;
  font-style: normal;
  line-height: 36px;
  padding-left:10px
}
.conditionsTxt ul>li i.el-icon-success{
  font-size: 18px;
}
.conditionsTxt ul>li i.el-icon-warning{
  line-height: 32px;
}

.conditionsTxt ul>li i.el-icon-warning:before{
  display: none;
}
.conditionsTxt ul>li i.el-icon-warning span{
  width: 18px;
  height: 18px;
  background-color: #F87A23;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  border-radius: 50%;
}

.conditionsTxt ul>li p{
  width: 68%;
  line-height: 36px;
}
.conditionsTxt ul>li .el-select{
    width: 20%;
}
::v-deep .conditionsTxt ul>li .el-select .el-input__inner{
    padding-left: 10px;
    padding-right: 10px;
}
.el-scrollbar .el-select-dropdown__item{
   padding-left: 10px;
}
.el-scrollbar .el-select-dropdown__item.selected,
.el-scrollbar .el-select-dropdown__item.hover{
    color: #F87A23;
}
.conditionsTxt ul>li:last-child{
  border-bottom: 0;
}

/* 抽屉样式 */ 
.conditionsTxt.drawerBox h3{
  margin-top: 0;
}
::v-deep .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}

.conditionsTxt.drawerBox h3>p:nth-child(1){
  width:10%;
}
.conditionsTxt.drawerBox h3>p:nth-child(2){
  width: 7%;
}
.drawerEdit h4{
  display: flex;
  align-items: center;
  margin: 8px 0;
}
.drawerEdit i.el-icon-remove{
  width: 8%;
  color: #909AAA;
  font-size: 14px;
  cursor: pointer;
}
.drawerEdit i.el-icon-remove.isDisabled{
    opacity: 0.5;
}

.conditionsTxt .drawerEdit ul>li{
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #EBEEF5;
  border-bottom: 0;
}
.conditionsTxt .drawerEdit ul>li>p{
  width: 8%;
  text-align: center;
}
.conditionsTxt .drawerEdit ul>li>.el-input{
  width: 84%;
}
.drawerEdit .drawerAdd{
  padding: 15px 0;
  border-top: 1px solid #EBEEF5;
  border-bottom: 1px solid #EBEEF5;
}
.drawerEdit .drawerAdd i{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 12.5px;
  height: 12.5px;
  border: 1px solid #909AAA;
  color: #909AAA;
  margin-left: 11%;
  cursor: pointer;
}
/* 抽屉样式 end */

/* 需求 */
.demandDrawer.conditionsTxt h3>p:nth-child(3){
  width: 40%;
}
.demandDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(3){
  margin-right: 3%;
}
.demandDrawer.conditionsTxt .drawerEdit ul>li>.el-input{
  width: 40%;
}

/* 步骤 */
.stepDrawer.conditionsTxt h3>p:nth-child(3){
  width: 68%;
}
.stepDrawer.conditionsTxt h3>p:nth-child(4){
  flex: 1;
}

.stepDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(3){
  width: 45%;
  margin-right: 5%;
}
.stepDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(4){
  width: 15%;
  margin-left: auto;
}
/* 抽屉样式 end*/ 

/* 项目需求 */
.demandbox h3>p:nth-child(2),
.demandbox h3>p:nth-child(3){
  width: 44%;
}

.demandbox ul>li p{
  width: 44%;
}

/* 流程步骤 */
.conditionsTxt.stepbox ul>li{
  color: #ACB6C7;
  cursor: pointer;
}
.conditionsTxt.stepbox ul>li.isUnder{
  color: #F87A23;
}
.conditionsTxt.stepbox ul>li.isSuccee{
  color: #0CA454;
}
.conditionsTxt.stepbox ul>li.isActive{
  background-color: #f7f7f7;
}
.stepbox h3>p:nth-child(2){
  width: 36%;
}
.stepbox h3>p:nth-child(3){
  width: 16%;
}
.stepbox h3>p:nth-child(4){
  width: 18%;
}
.stepbox h3>p:nth-child(5){
  width: 18%;
}

.stepbox ul>li p:nth-child(2){
  width: 36%;
}
.stepbox ul>li p:nth-child(3){
  width: 16%;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.stepbox ul>li p:nth-child(4){
  width: 18%;
}
.stepbox ul>li p:nth-child(5){
  width: 18%;
}

/* 点击一条流程步骤的抽屉 */
.stepProcess{
    padding: 0 20px 20px;
    height: 100%;
}
/* 点击一条流程步骤的抽屉 end */

/* 更改记录的样式 */
.record{
    font-size: 12px;
    margin: 8px 0;
    cursor: pointer;
}

/* 右侧按钮样式 */
::v-deep .subBtn{
  justify-content: space-between;
  align-items: center;
  padding: 8px 30px!important;
  z-index: 99;
  min-height: 32px;
}
::v-deep .subBtn .el-button{
  width: 100px;
  padding: 8px 0!important;
  font-size: 14px;
  color: #606E84;
}
::v-deep .subBtn .el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
</style>

<style scoped>
/* 树状结构样式 */
.el-tree >>> .el-tree-node {
  position: relative;
}
.el-tree >>> .el-tree-node__expand-icon {
  display: none;
}
.el-tree >>> .el-tree-node__content {
  width: 100%;
  height: auto;
  padding-left: 0 !important;
}
.el-tree .custom-tree-node {
  width: 100%;
  margin: 4px 0;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #f5f7fa;
  cursor: move!important;
}
.el-tree .el-icon-remove {
  width: 8%;
  color: #909aaa;
  cursor: pointer;
}
.el-tree .el-icon-remove.isEdit{
  visibility: hidden;
}
.el-tree .treeNum {
  width: 8%;
  text-align: center;
  font-size: 14px;
}
.el-tree .el-input {
  flex: 1;
}
.el-tree .el-input.groupInput{
  flex: none;
  width: 84%;
  margin-left: auto;
}
.el-tree .custom-tree-node .el-input:nth-child(3){
  width: 46%;
  margin-right: 5%;
  flex: inherit;
}

.el-tree .custom-tree-node .el-input:nth-child(4){
  width: 15%;
  margin-left: auto;
  flex: inherit;
}

.el-tree .drawerAdd {
  width: 100%;
  position: absolute;
  bottom: 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f7fa;
}
.el-tree .drawerAdd > svg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #909aaa;
  margin-left: 10%;
  cursor: pointer;
}

.el-tree >>> .el-tree-node:focus > .el-tree-node__content,
.el-tree >>> .el-tree-node > .el-tree-node__content:hover {
  background-color: #fff;
}

::v-deep .el-tree > .el-tree-node > .el-tree-node__children {
  padding-bottom: 40px;
}
/* 树状结构样式 end */
</style>